
<template>
  <div class="project-list">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="project in projects" :key="project.id">
        <el-card class="project-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span class="project-name">{{ project.name }}</span>
              <el-tag :type="getStatusType(project.status)" size="small">
                {{ getStatusText(project.status) }}
              </el-tag>
            </div>
          </template>
          
          <div class="project-content">
            <p class="project-description">{{ project.description || '暂无描述' }}</p>
            <div class="project-meta">
              <span class="create-time">
                <el-icon><Clock /></el-icon>
                {{ formatDate(project.created_at) }}
              </span>
            </div>
          </div>
          
          <template #footer>
            <div class="card-footer">
              <el-button type="primary" size="small" @click="$emit('project-selected', project)">
                <el-icon><View /></el-icon>
                查看详情
              </el-button>
              <el-button type="warning" size="small" @click="editProject(project)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button type="danger" size="small" @click="deleteProject(project)">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑项目对话框 -->
    <el-dialog
      v-model="showEditDialog"
      title="编辑项目"
      width="500px"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="editForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input
            v-model="editForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入项目描述"
          />
        </el-form-item>
        <el-form-item label="项目状态">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="活跃" value="active" />
            <el-option label="暂停" value="paused" />
            <el-option label="完成" value="completed" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="updateProject">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

export default {
  name: 'ProjectList',
  props: {
    projects: {
      type: Array,
      required: true
    }
  },
  emits: ['refresh', 'project-selected'],
  setup(props, { emit }) {
    const showEditDialog = ref(false)
    const editForm = reactive({
      id: null,
      name: '',
      description: '',
      status: 'active'
    })

    const getStatusType = (status) => {
      const statusMap = {
        active: 'success',
        paused: 'warning',
        completed: 'info'
      }
      return statusMap[status] || 'info'
    }

    const getStatusText = (status) => {
      const statusMap = {
        active: '活跃',
        paused: '暂停',
        completed: '完成'
      }
      return statusMap[status] || status
    }

    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    const editProject = (project) => {
      editForm.id = project.id
      editForm.name = project.name
      editForm.description = project.description
      editForm.status = project.status
      showEditDialog.value = true
    }

    const updateProject = async () => {
      if (!editForm.name.trim()) {
        ElMessage.warning('请输入项目名称')
        return
      }

      try {
        await axios.put(`/api/projects/${editForm.id}`, {
          name: editForm.name,
          description: editForm.description,
          status: editForm.status
        })
        ElMessage.success('项目更新成功')
        showEditDialog.value = false
        emit('refresh')
      } catch (error) {
        ElMessage.error('更新项目失败')
        console.error(error)
      }
    }

    const deleteProject = async (project) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除项目 "${project.name}" 吗？此操作将同时删除项目下的所有需求和文档。`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await axios.delete(`/api/projects/${project.id}`)
        ElMessage.success('项目删除成功')
        emit('refresh')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除项目失败')
          console.error(error)
        }
      }
    }

    return {
      showEditDialog,
      editForm,
      getStatusType,
      getStatusText,
      formatDate,
      editProject,
      updateProject,
      deleteProject
    }
  }
}
</script>

<style scoped>
.project-list {
  padding: 20px 0;
}

.project-card {
  margin-bottom: 20px;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.project-content {
  min-height: 100px;
}

.project-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.project-meta {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 12px;
}

.create-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>
